<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>06-微博发布</title>
    <style>
      * {
        padding: 0;
        margin: 0;
      }
      ul {
        list-style: none;
      }
      h1 {
        font-size: 20px;
        text-align: center;
        margin-bottom: 20px;
      }
      .main {
        width: 400px;
        box-sizing: content-box;
        margin: 30px auto;
        padding: 20px;
        border: 1px dashed #ccc;
      }

      .box::after {
        content: ".";
        display: block;
        clear: both;
        font-size: 0;
        line-height: 0;
        visibility: hidden;
      }

      #text-view {
        width: 350px;
        height: 100px;
        font-size: 15px;
        padding: 5px;
        box-sizing: border-box;
        /*设置输入框不可变化*/
        resize: none;
        vertical-align: middle;
      }

      #publish-btn {
        width: 40px;
        vertical-align: middle;
      }
      #weibo-list > li {
        font-size: 13px;
        padding: 5px 40px 5px 0;
        border-bottom: 1px dashed #cccccc;
      }
      #weibo-list > li > a {
        float: right;
        width: 40px;
        margin-right: -45px;
      }
    </style>

    <script>
        window.onload = function () {
            let pushEle = document.getElementById("publish-btn");
            pushEle.onclick = function () {
                let textEle = document.getElementById("text-view");
                let value = textEle.value;
                let weiEle = document.getElementById("weibo-list");
                let liEle = document.createElement("li");
                liEle.innerHTML = value;
                // 创建超链接标签
                let aEle = document.createElement("a");
                aEle.href = "javascript:;";
                aEle.innerText = "删除";
                liEle.appendChild(aEle);
                weiEle.appendChild(liEle);

                let aEles = document.getElementsByTagName("a");
                for (let i = 0; i < aEles.length; i++) {
                    let a = aEles[i];
                    a.onclick = function () {
                      // 删除a的父节点
                      weiEle.removeChild(a.parentNode);
                    }
                }
            }
        }
    </script>
</head>
<body>
<div class="main">
  <h1>微博发布</h1>
  <div class="box">
    <textarea name="content" id="text-view"></textarea>
    <input type="button" id="publish-btn" value="发布">
  </div>
  <ul id="weibo-list">
    <!--<li>哈哈哈 <a>删除</a></li>
    <li>哈哈哈 <a>删除</a></li>
    <li>哈哈哈 <a>删除</a></li>-->
  </ul>
</div>
</body>
</html>